// 用于构造三角形
// - $direction 三角形方向
// - $size 大小
// - $border-color 颜色
// 仅能用在伪类元素上:after，:before
// 使用了绝对定位，需要自己调整位置
@mixin triangle($direction, $size, $border-color){
  $size: $size/2;
  content:"";
  height: 0;
  width: 0;
  position: absolute;

  @if $direction == top{
    border-bottom: $size solid $border-color;
    border-left: $size dashed transparent;
    border-right: $size dashed transparent;
  }
  @else if $direction == right{
    border-left: $size solid $border-color;
    border-top: $size dashed transparent;
    border-bottom: $size dashed transparent;
  }
  @else if $direction == bottom{
    border-top: $size solid $border-color;
    border-left: $size dashed transparent;
    border-right: $size dashed transparent;
  }
  @else if $direction == left{
    border-right: $size solid $border-color;
    border-top: $size dashed transparent;
    border-bottom: $size dashed transparent;
  }
}

// 用于构造有边框的三角形，边框用另一个三角形模拟实现
// - $前三个参数同@mixin triangle
// - $second-bdcolor 边框颜色，即第二个三角形颜色
// - $offset 位置，默认为center，可传入数值单位，根据$direction的不同会自动变为对应的top、left值
// - $border-width 边框大小，默认为1px
// 用在具体div上，而不是伪元素
@mixin triangle-double($direction, $size, $border-color, $second-bdcolor, $offset: center, $border-width: 1px){
  $direction-value: 0;
  $after-value: 0;
  $offset-value: left;
  @if $direction == left or $direction == top{
    $direction-value: -$size/2;
    $after-value: $border-width;
  }
  @else{
    $direction-value: 0;
    $after-value: $border-width - $size/2;
  }
  @if $direction == left or $direction ==right{
    $offset-value: top;
  }

  position: absolute;
  #{$direction}: $direction-value;
  @if $offset == center{
    #{$offset-value}: calc(50% - #{$size}/2);
  }
  @else{
    #{$offset-value}: $offset;
  }
  &:before{
    @include triangle($direction, $size, $border-color);
  }
  &:after{
    @include triangle($direction, $size, $second-bdcolor);
    #{$direction}: $after-value;
  }
}

@mixin chevron($bd-color, $width, $bd-width){
  content: '';
  display: inline-block;
  position: relative;
  height: $width;
  width: $width;
  border-width: $bd-width $bd-width 0 0;
  border-color: $bd-color;
  border-style: solid;
  vertical-align: middle;
}
@mixin chevron-top($bd-color: $primary, $width: 8px, $bd-width: 2px){
  transform: rotate(315deg);
  top: 2px;
  @include chevron($bd-color, $width, $bd-width);
}
@mixin chevron-bottom($bd-color: $primary, $width: 8px, $bd-width: 2px){
  transform: rotate(135deg);
  top: -2px;
  @include chevron($bd-color, $width, $bd-width);
}
@mixin chevron-right($bd-color: $primary, $width: 8px, $bd-width: 2px){
  transform: rotate(45deg);
  @include chevron($bd-color, $width, $bd-width);
}
@mixin chevron-left($bd-color: $primary, $width: 8px, $bd-width: 2px){
  transform: rotate(225deg);
  @include chevron($bd-color, $width, $bd-width);
}
